<template>
  <div>
    <header class="site-header jumbotron">
      <div class="container">
        <div class="row">
          <div class="col-xs-12">
            <h1>请发表对Vue的评论</h1>
          </div>
        </div>
      </div>
    </header>

    <div class="container">
    <!-- 3.使用组件标签 : 相当于把整个 *.vue中的内容拿过来,此处展示<template>  -->
      <!-- 将addComment方法传递个Add子组件     -->
    <Add :addComment="addComment"/>
    <!-- 组件间通信 : 父组件传输数据-->
          <!-- :comments="comments" ： 把comments数组传递给 List组件 -->
          <!-- :deleteComment="deleteComment" : 先把函数传递个List组件，List组件再传给Item组件 -->
    <List :comments="comments"
          :deleteComment="deleteComment"/>

    </div>
  </div>
</template>

<script>
  //1. 引入组件
  import Add from './components/Add.vue'
  import List from './components/List.vue'

    export default {
        name: "App",
      //组件中必须写的都是函数
      data(){
          return {
             comments: [    //数据在哪个组件，更新数据的行为(方法)就应该定义在哪个组件
               {
                 name: 'BOB',
                 content: 'Vue 还不错'
               },
               {
                 name: 'Cat',
                 content: 'Vue So Easy'
               },
               {
                 name: 'BZ',
                 content: 'Vue So So'
               }
             ]
          }
      },
      methods: {
        //添加评论
        addComment(comment){
          //将数据添加在数组的最前面
          this.comments.unshift(comment);
        },
        //删除指定下标的评论
        deleteComment(index){
          this.comments.splice(index,1);
        }
      },
      //2. 映射组件标签
      components: {
          Add,
          List
      }
    }
</script>

<style scoped>

</style>
